<template>
  <el-drawer
    class="subform-drawer"
    size="100%"
    :title="title"
    direction="btt"
    v-model="dialogFormVisible"
    @close="handleCloseDrawer"
  >
    <div ref="drawerBody">
      <generate-form
        v-if="formConf.fields.length"
        :key="formParseKey"
        ref="generateFormRef"
        :form-conf="formConf"
        :is-sub-form="true"
        :page-form-model="formModel"
        class="form-content"
      />
    </div>
    <template #footer>
      <div class="text-center pb10">
        <el-button @click="dialogFormVisible = false">
          {{ $t("common.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="handleUpdate"
        >
          {{ $t("common.submit") }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" name="AddOrUpdate" setup>
import { defineAsyncComponent, provide, ref } from "vue";
import { useAddOrUpdate } from "./useAddOrUpdate";
import { IS_SUB_FORM_KEY, USER_FORM_STATE_KEY } from "@/views/formgen/components/GenerateForm/types/constants";

const GenerateForm = defineAsyncComponent(() => import("../../GenerateForm/GenerateForm.vue"));

provide(IS_SUB_FORM_KEY, true);

const emit = defineEmits(["submit"]);

const props = defineProps({
  fields: {
    type: Array,
    default: () => []
  }
});

const { formParseKey, dialogFormVisible, formModel, title, formConf, generateFormRef, handleUpdate, showDialog, userFormStore } =
  useAddOrUpdate(emit, props);

const drawerBody = ref(null);

const handleCloseDrawer = () => {
  // 很多题目的时候滚动到最上面 避免下次打开还在最底下
  document.querySelector(".subform-drawer .el-drawer__body")!.scrollTop = 0;
};

provide(USER_FORM_STATE_KEY, userFormStore);

defineExpose({
  showDialog,
  handleUpdate
});
</script>

<style lang="scss" scoped>
/*去除upload组件过渡效果*/
:deep(.el-upload-list__item) {
  transition: none !important;
  -webkit-transition: none !important;
}

:deep(.el-upload-list__item-name) {
  transition: none !important;
  -webkit-transition: none !important;
}
</style>
<style>
/* .subform-drawer .el-drawer__body {
  height: 82vh !important;
  display: block;
  flex: none;
} */

.form-content .el-form-item__error {
  position: relative !important;
}
</style>
